<template>
	<Layout showFooter>
		<template #title>{{isLawyer()?'律师':'律所'}}案例</template>
		<ScorllRefresher @refresh="loadData()">
			<view v-for="item of list" :key="item" class="lawyer-case">
				<view class="lawyer-case__box">
					<view class="iflex aic">
						<view class="lawyer-case__image aspect-fill">
							<image mode="aspectFill" :src="item.caseImage"></image>
						</view>
						<view class="lawyer-case__intro">
							<view class="ellipsis-line-clamp">{{item.title}}</view>
						</view>
					</view>
					<view class="edit-button" @click.stop="tapEdit(item.id)">编辑</view>
				</view>
			</view>
		</ScorllRefresher>
		<template #footer>
			<view class="common-footer">
				<u-button style="width:100%;" type="primary" size="large" :fill="true"
					@click.stop="tapAdd">新增</u-button>
			</view>
		</template>
	</Layout>
</template>

<script setup lang="ts" name="LawyerCase">
	import Layout from '@/components/layout/layout.vue';
	import ScorllRefresher from '@/components/scroll-refresher/scroll-refresher.vue';
	import { getLawfirmCaseList } from '@/apis/lawfirm';
	import { ref, defineExpose } from 'vue';
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
	import type { AnyObj } from '@/types/global';
	import { Action } from '@/utils/constant';
	import { isLawyer } from '@/utils/auth';


	let lawFirmId = '';
	const list = ref<AnyObj[]>([]);
	function tapEdit(id : string) {
		uni.navigateTo({
			url: `/pages-lawyer/crud-case/crud-case?lawFirmId=${lawFirmId}&id=${id}&action=${Action.Edit}`
		})
	}

	function tapAdd() {
		uni.navigateTo({
			url: `/pages-lawyer/crud-case/crud-case?lawFirmId=${lawFirmId}&action=${Action.Add}`
		})
	}

	function loadData() {
		list.value = [];
		getLawfirmCaseList(lawFirmId).then((res) => {
			list.value = res.rows ?? [];
		});
	}


	onPullDownRefresh(() => {
		loadData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	});

	onLoad((options) => {
		options = options as { lawFirmId : string; }
		lawFirmId = options.lawFirmId;
		loadData();
	});

	uni.$on('law-case-refresh', () => {
		loadData();
	});
</script>

<style lang="scss">
	.lawyer-case__intro {
		margin-left: 28rpx;
		width: 360rpx;
	}
</style>